<template>
  <div class="container">
    <el-card>
      <el-row type="flex" justify="end" style="margin-bottom: 10px">
        <el-button @click="$router.push('/questions/new')" type="success" size="small">
          <i class="el-icon-edit"></i>
          <span >新增试题</span>
        </el-button>
      </el-row>
      <el-form>
        <el-row align="right">
          <el-col :span="6">
            <el-form-item label-width="90px" label="学科" prop="subjects">
              <el-select
                size="small"
                style="width:100%"
                v-model="formInline.subjectID"
                placeholder="请选择"
                @change="getTwoLevelDirectory"
              >
                <el-option v-for="item in subjects" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="90px" label="二级目录">
              <el-select
              style="width:100%"
                size="small"
                v-model="formInline.twoLevelDirectory"
                placeholder="请选择"
              >
                <el-option v-for="item in twoLevelDirectorys" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="90px" label="标签">
              <el-select
              style="width:100%"
                size="small"
                v-model="formInline.tags"
                placeholder="请选择"
              >
                <el-option v-for="item in tags" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="90px" label="关键字" prop="keyWord">
              <el-input style="width:100%" size="small" v-model="formInline.keyWord" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="90px" label="试题类型" prop="questionType">
              <el-select
              style="width:100%"
                size="small"
                v-model="formInline.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="90px" label="难度" prop="difficulty">
              <el-select
              style="width:100%"
                size="small"
                v-model="formInline.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="90px" label="方向" prop="direction">
              <el-select
                size="small"
                style="width:100%"
                v-model="formInline.direction"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="90px" label="录入人">
              <el-select
                size="small"
                style="width: 100%"
                v-model="formInline.creatorID"
                placeholder="请选择"
              >
                <el-option v-for="item in creatorIDs" :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label-width="90px" label="题目备注" :prop="formInline.remarks">
              <el-input style="width:100%" size="small" v-model="formInline.remarks" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="90px" label="企业简称" :prop="formInline.shortName">
              <el-input style="width:100%" size="small" v-model="formInline.shortName" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item inline label-width="90px" label="城市" >
              <el-select
                style="width:48%; margin-right: 4%"
                size="small"
                v-model="formInline.province"
                placeholder="请选择"
                @change="getCity"
              >
                <el-option v-for="(item,index) in provinces" :key="index"  :label="item" :value="item"></el-option>
              </el-select>
              <el-select
                size="small"
                style="width:48%"
                v-model="formInline.city"
                placeholder="请选择"
              >
                <el-option v-for="(i,index) in city" :key="index"  :label="i" :value="i" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item inline label-width="90px">
              <el-button size="small" @click="clearAll">清除</el-button>
              <el-button size="small" @click="btnSearch" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        :closable="false"
        :title="`数据一共${this.total}条`"
        type="info"
        show-icon
      >
      </el-alert>
      <el-table :data="questionList" v-model="questionList" stripe style="width: 100%">
        <el-table-column prop="number" label="试题编号" min-width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" min-width="80">
        </el-table-column>
        <el-table-column prop="catalogID" label="目录" min-width="80">
        </el-table-column>
        <el-table-column prop="questionType" :formatter="formatQuestionType" label="题型" min-width="80">
        </el-table-column>
        <el-table-column label="题干" min-width="280">
          <template slot-scope="scope">
            {{ scope.row.question | html2Text}}
          </template>
        </el-table-column>
        <el-table-column label="录入时间" min-width="180">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" :formatter="formatDifficultyType" label="难度" min-width="80">
        </el-table-column>
        <el-table-column prop="creator" label="录入人" min-width="80">
        </el-table-column>
        <el-table-column prop="address" label="操作" min-width="180">
          <template slot-scope="{ row }">
            <el-button type="primary" plain icon="el-icon-view" title="预览" class="el_button" @click="btnPreview(row)" circle></el-button>
            <el-button type="success" plain icon="el-icon-edit" title="修改" class="el_button" @click="btnEdit(row.id)" circle></el-button>
            <el-button type="danger" plain icon="el-icon-delete" title="删除" class="el_button" @click="btnDelete(row.id)"  circle></el-button>
            <el-button type="warning" plain icon="el-icon-check" title="加入精选" class="el_button" @click="btnAdd(row)"  circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" justify="center" style="height: 60px">
        <el-pagination
          background
          :page-size="reqParams.pagesize"
          :current-sizes="reqParams.page"
          layout="prev, pager, next,sizes,jumper"
          @size-change="changeSize"
          @current-change="changeCurrent"
          :page-sizes="[5,10,20,50]"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>
    <questions-preview
    ref="subject"
    :show-dialog.sync="showDialog"
    />
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants' // 引入难度 题型  方向数据
import { simple as simples } from '@/api/hmmm/directorys' // 获取二级目录
import { simple as getTags } from '@/api/hmmm/tags' // 获取标签
import { list, remove, choiceAdd } from '@/api/hmmm/questions' // 展示 移除 添加试题
import { provinces, citys } from '@/api/hmmm/citys' // 引入城市名称
import { simple } from '@/api/hmmm/subjects' // 获取学科简单列表
import questionsPreview from '../components/questions-preview.vue' // 引入预览组件
import { simple as getAdministrators } from '@/api/base/users' // 获取管理员
export default {
  components: { questionsPreview },
  data () {
    return {
      total: 0, // 题总数
      // 分页
      reqParams: {
        pagesize: 5,
        page: 1
      },
      questionList: [], // 试题列表
      difficulty, // 难度
      questionType, // 试题类型
      direction, // 方向
      provinces: provinces(), // 省份
      city: [], // 城市
      citys,
      subjects: [], // 学科
      twoLevelDirectorys: [], // 学科详情
      tags: [], // 标签
      creatorIDs: [], // 录入人
      formInline: {
        difficulty: null, // 难度
        questionType: null, // 试题类型
        direction: null, // 方向
        province: null, // 省份
        city: null, // 城市
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyWord: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称,
        creatorID: null
      },
      showDialog: false // 控制删除弹框
    }
  },
  created () {
    this.getSubjects()
    this.getQuestionsList()
    this.getAdministrators()
  },
  methods: {
    getCity (value) {
      // console.log(value)
      this.city = citys(value)
    },
    async getSubjects () {
      // console.log(await list())
      // 获取学科列表
      const { data } = await simple()
      this.subjects = data
    },
    async getTwoLevelDirectory (value) {
      this.formInline.twoLevelDirectory = ''
      this.formInline.tags = ''
      // 获取二级目录
      const { data } = await simples({ subjectID: value })
      this.twoLevelDirectorys = data
      // 获取标签
      const data1 = await getTags({ subjectID: value })
      this.tags = data1.data
    },
    // 获取数据列表
    async getQuestionsList () {
      const { data } = await list({ ...this.reqParams, ...this.formInline })
      this.total = data.counts
      this.questionList = data.items
    },
    // 筛选列表
    btnSearch () {
      this.getQuestionsList()
    },
    // 题型
    formatQuestionType (row, column, cellValue, index) {
      const obj = this.questionType.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 难度
    formatDifficultyType (row, column, cellValue, index) {
      const obj = this.difficulty.find(item => item.value === +cellValue)
      return obj ? obj.label : '未知'
    },
    // 获取录入人
    async getAdministrators () {
      const { data } = await getAdministrators()
      this.creatorIDs = data
      // console.log(this.creatorID)
    },
    // 清空表单
    clearAll () {
      this.formInline = {
        difficulty: null, // 难度
        questionType: null, // 试题类型
        direction: null, // 方向
        province: null, // 省份
        city: null, // 城市
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyWord: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称,
        creatorID: null
      }
      this.getQuestionsList()
    },
    // 预览试题
    async btnPreview (data) {
      this.showDialog = true
      await this.$refs.subject.detail(data) // 调用父组件的方法
    },
    // 修改试题
    btnEdit (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    // 删除试题
    btnDelete (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: id })
        this.getQuestionsList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    btnAdd (data) {
      console.log(data)
      this.$confirm('此操作将该题目加入到精选，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ ...data, choiceState: 1 })
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.$router.push('/questions/new')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        })
      })
    },
    changeSize (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getQuestionsList()
    },
    changeCurrent (newPage) {
      this.reqParams.page = newPage
      this.getQuestionsList()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 10px;
  .el-button{
    font-size: 10px;
  }
}
</style>
